<template>
  <div class="recurveCollapse">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item
        v-for="(collapseItem, collapseIndex) in collapseList"
        :title="collapseItem.label"
        :name="collapseIndex"
      >
        <template>
          <el-tabs v-model="tabActiveName">
            <el-tab-pane label="基础配置" name="1">
              <el-form-item label="是否显示">
                <el-switch
                  @change="changeForm"
                  v-model="collapseItem.show"
                ></el-switch>
              </el-form-item>
              <el-form-item label="列宽">
                <el-input
                  @change="changeForm"
                  v-model.number="collapseItem.width"
                ></el-input>
              </el-form-item>
              <el-form-item label="列固定">
                <el-select
                  filterable
                  v-model="collapseItem.fixed"
                  @change="changeForm"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in fixOptions"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="表头配置" name="2">
              <el-form-item label="是否排序">
                <el-switch
                  @change="changeForm"
                  v-model="collapseItem.sortable"
                ></el-switch>
              </el-form-item>
              <el-form-item label="是否筛选">
                <el-switch
                  @change="changeForm"
                  v-model="collapseItem.filter"
                ></el-switch>
              </el-form-item>
              <el-form-item label="标题">
                <el-input
                  @change="changeForm"
                  v-model="collapseItem.label"
                ></el-input>
              </el-form-item>
              <el-form-item label="文字位置">
                <el-select
                  filterable
                  v-model="collapseItem.align"
                  @change="changeForm"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in alignOptions"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="图标配置" name="3">
              <el-form-item label="图标位置">
                <el-select
                  filterable
                  v-model="collapseItem.iconPosition"
                  @change="changeForm"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(iOItem, i) in iconOptions"
                    :key="i"
                    :label="iOItem.label"
                    :value="iOItem.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-tabs v-model="iconActiveName">
                <el-tab-pane
                  v-for="(iconItem, iconKey) in collapseItem.icon"
                  :key="collapseIndex + iconKey"
                  :label="iconKey"
                  :name="iconKey"
                >
                  <el-form-item label="图标选择">
                    <el-select
                      filterable
                      v-model="iconItem.iconName"
                      @change="changeForm"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(iItem, i) in iconList"
                        :key="i"
                        :label="iItem"
                        :value="iItem"
                      >
                        <span :class="iItem"></span
                        ><span style="padding-left: 15px">{{ iItem }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="图标颜色">
                    <el-popover
                      popper-class="colorBox"
                      placement="left-end"
                      trigger="click"
                      :show-arrow="false"
                    >
                      <colerPicker
                        @pushColor="changeForm"
                        v-model="iconItem.color"
                      ></colerPicker>
                      <template v-slot:reference>
                        <div>
                          <el-button
                            class="colorButton"
                            :style="`backgroundColor:${iconItem.color}`"
                            >点击编辑
                          </el-button>
                        </div>
                      </template>
                    </el-popover>
                  </el-form-item>
                  <el-form-item label="显示规则">
                    <el-select
                      filterable
                      v-model="iconItem.rule"
                      @change="changeForm"
                      placeholder="请选择"
                    >
                      <el-option-group
                        v-for="group in ruleList"
                        :key="group.label"
                        :label="group.label"
                      >
                        <el-option
                          v-for="item in group.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-option-group>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="规则参数">
                    <nlInputPopover
                      popoverContent="大于小于规则需要配置数字，属于不属于需要配置标准的数组字面量字符串，类似 ['上海'] ，自定义正则使用正则字面量字符串，类似 /.{2,}/ ,其他规则配置字符串即可。"
                    >
                      <el-input
                        @change="changeForm"
                        v-model.trim="iconItem.ruleArg"
                      ></el-input>
                    </nlInputPopover>
                  </el-form-item>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
          </el-tabs>
          <recurveCollapse
            v-if="collapseItem.children && item.children.length"
            @change="changeForm"
            :collapseList="item.children"
          ></recurveCollapse>
        </template>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { iconList } from '../data/variable'
import colerPicker from '../components/color-picker'

export default {
  name: 'recurveCollapse',
  components: { colerPicker },
  props: {
    collapseList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tabActiveName: '1',
      iconActiveName: 'success',
      activeName: -1,
      iconList,
      iconOptions: [
        {
          label: '靠左',
          value: 'left',
        },
        {
          label: '靠右',
          value: 'right',
        },
        {
          label: '不显示',
          value: 'false',
        },
      ],
      fixOptions: [
        {
          label: '靠左',
          value: 'left',
        },
        {
          label: '靠右',
          value: 'right',
        },
        {
          label: '不固定',
          value: 'false',
        },
      ],
      alignOptions: [
        {
          label: '居中',
          value: 'center',
        },
        {
          label: '靠左',
          value: 'left',
        },
        {
          label: '靠右',
          value: 'right',
        },
      ],
      color: {
        success: '#67C23A',
        warning: '#E6A23C',
        danger: '#F56C6C',
        info: '#909399',
      },
      ruleList: [
        {
          label: '默认',
          options: [
            {
              label: '不匹配',
              value: 'false',
            },
          ],
        },
        {
          label: '数字类',
          options: [
            {
              label: '小于',
              value: 'data<{%%}',
            },
            {
              label: '小于等于',
              value: 'data<={%%}',
            },
            {
              label: '大于',
              value: 'data>{%%}',
            },
            {
              label: '大于等于',
              value: 'data>={%%}',
            },
            {
              label: '等于',
              value: 'data=="{%%}"',
            },
            {
              label: '不等于',
              value: 'data!="{%%}"',
            },
          ],
        },
        {
          label: '字符串类',
          options: [
            {
              label: '属于',
              value: '{%%}.indexOf(data)>-1',
            },
            {
              label: '不属于',
              value: '{%%}.indexOf(data)<0',
            },
            {
              label: '包含',
              value: 'data.includes("{%%}")',
            },
            {
              label: '不包含',
              value: '!data.includes("{%%}")',
            },
            {
              label: '为空',
              value: 'data.length===0',
            },
            {
              label: '非空',
              value: 'data.length!==0',
            },
            {
              label: '开头是',
              value: 'data.match(/^{%%}/)',
            },
            {
              label: '结尾是',
              value: 'data.match(/{%%}$/)',
            },
            {
              label: '开头不是',
              value: '!data.match(/^{%%}/)',
            },
            {
              label: '结尾不是',
              value: '!data.match(/{%%}$/)',
            },
          ],
        },
        {
          label: '自定义正则',
          options: [
            {
              label: '正则匹配',
              value: 'data.match({%%})',
            },
          ],
        },
      ],
    }
  },
  methods: {
    changeForm() {
      this.$emit( 'change')
    },
  },
  emits: ['change'],
}
</script>

<style scoped>
.recurveCollapse {
  border: 1px solid #ccc;
  padding: 3px;
  box-shadow: 2px 2px 2px #ccc;
}
</style>
